<template>
  <div class="login">
    <div class="welcome">欢迎登陆~</div>
    <div class="login-action">
      <!-- <div class="tab-block">
        <div
          v-for="(item, key) in tab"
          :key="key"
          class="tab-item"
          :class="{
            activeTab: key == activeTabKey,
            left: key == 1,
            right: key == 2,
          }"
          @click="handleClickTab(item, key)"
        >
          <div v-if="activeTabKey == 1" class="square-left"></div>
          <div v-if="activeTabKey == 2" class="square-right"></div>
          <div class="label">
            {{ item.label }}
          </div>
        </div>
      </div> -->
      <div class="form-block">
        <div v-for="(item, key) in form" :key="key" class="form-item">
          <div v-if="item.type == 'input' && item.show" class="input-block">
            <img :src="item.image" alt="" />
            <input v-model="item.value" :type="item.inputType" :placeholder="item.placeholder" />
            <div v-if="item.icon" class="iconfont icon" v-html="item.icon" @click="handleClickIcon(key)"></div>
          </div>
          <div v-if="item.type == 'inputCode' && item.show" class="input-code">
            <!-- <SliderCheck :successFun="handleSuccessFun" :errorFun="handleErrorFun"></SliderCheck> -->
            <div class="l">
              <img :src="item.image" alt="" />
              <input
                v-model="item.value"
                :type="item.inputType"
                :placeholder="item.placeholder"
              />
            </div>
            <div class="r">
              <img :src="codeUrl" alt="" @click="refreshCode" />
            </div>
          </div>
          <div v-if="item.type == 'checkBox' && item.show" class="check-box">
            <div class="icon-square" :class="{ checked: item.value }" @click="handleClickIcon(key)">
              <div v-if="item.value" class="iconfont icon-mark">&#xe604;</div>
            </div>
            <div class="text">保持登录</div>
          </div>
        </div>
        <div class="btn">
          <div class="btn-login" @click="login">立即登录</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import SliderCheck from './SliderCheck'
  export default {
    components: {
      SliderCheck
    },
    data() {
      return {
       // codeUrl: "/admin/login/captcha",
         codeUrl: "/api/admin/login/captcha",
        isActive: false,
        activeTabKey: 1,
        vscode: false,
        image: "",
        tab: {
          1: {
            label: "普通用户",
          },
          2: {
            label: "员工登录",
          },
        },
        // 普通用户 员工登录
        form: {
          username: {
            type: "input",
            value: "",
            show: true,
            require: true,
            placeholder: "请输入账号",
            image: require(`@/assets/img/login_1.png`),
            inputType: "text",
            tooltip: "请输入账号",
          },
          staff: {
            type: "input",
            value: "",
            show: false,
            require: true,
            placeholder: "请输入操作员账号",
            image: require(`@/assets/img/login_6.png`),
            inputType: "text",
            tooltip: "请输入操作员账号",
          },
          password: {
            type: "input",
            value: "",
            show: true,
            require: true,
            placeholder: "请输入密码",
            image: require(`@/assets/img/login_2.png`),
            icon: "&#xe63c;",
            inputType: "password",
            tooltip: "请输入密码",
          },
          captcha: {
            type: "inputCode",
            value: "",
            show: true,
            require: true,
            placeholder: "请输入验证码",
            image: require(`@/assets/img/login_3.png`),
            inputType: "text",
            tooltip: "请输入验证码",
          },
          keep_login: {
            type: "checkBox",
            show: true,
            value: 0,
          },
        },
      };
    },
    async mounted() {
      document.onkeydown = (event) => {
        var e = event || window.event;
        if (e && e.keyCode == 13) {
          this.login();
        }
      };
      // 为了判断用户是否登录，登录了能获取到数据，没登陆 报错404
      let res = await this.$api.htsy_announcement({
        type: "client",
        userinfo: "client_gg",
      });
      console.log(res, "rrr");
      if (res.code != 50001) {
        this.$router.push({
          name: "htsy"
        });
      }
    },
    destroyed() {
      document.onkeydown = null;
    },
    methods: {
      handleSuccessFun() {
        this.vscode = true
      },
      // 滑块验证失败回调
      handleErrorFun() {},
      // 按钮切换
      handleClickTab(item, key) {
        this.activeTabKey = key;
        this.form.staff.show = key == 2 ? true : false;
      },
      // 密码框隐藏显示
      handleClickIcon(key) {
        if (key == "password") {
          this.form.password.inputType =
            this.form.password.inputType === "password" ? "text" : "password";
        }
        if (key == "keep_login") {
          this.form.keep_login.value = this.form.keep_login.value ? 0 : 1;
        }
      },
      // 点击登录接口
      async login() {
        for (let key in this.form) {
          if (!this.form[key].show || !this.form[key].require) {
            continue;
          }
          if (this.form[key].value == "") {
            return this.$message({
              message: this.form[key].tooltip,
              type: "warning",
            });
          }
        }
        let reqBody = {
          staff: "",
          restype: "json",
        };
        for (let key in this.form) {
          if (this.form[key].show) {
            reqBody[key] = this.form[key].value;
          }
        }
        let res = await this.$api.login(reqBody);
        let personres = JSON.stringify(res.data);
        window.localStorage.setItem("person", personres);
        if (res.code != 0) {
          this.refreshCode();
          return this.$message({
            message: res.msg,
            type: "warning",
          });
        }
        if (res.code == 0) {
          if (res.msg == "验证码错误!") {
            this.refreshCode();
            return this.$message({
              message: res.msg,
              type: "warning",
            });
          } else {
            this.$router.push({
              name: "htsy"
            });
            return this.$message({
              message: res.msg,
              type: "success",
            });
          }
        }
      },
      refreshCode() {

        const num = Math.ceil(Math.random() * 10);
         this.codeUrl = "/api/admin/login/captcha?" + num;
        //this.codeUrl = "/admin/login/captcha?" + num; //测试
      },
    },
  };
</script>

<style lang="less" scoped>
  .login {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url("../assets/img/login_bg.jpg");
    background-position: center;
    background-size: cover;
  }

  .login-action {
    position: absolute;
    left: 200px;
    top: 200px;
    width: 382px;
    height: auto;

    .tab-block {
      display: flex;
      align-items: center;
      width: 382px;
      height: 70px;

      .tab-item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #fff;
        font-size: 20px;
        font-weight: bold;
        background-color: #c60000;
        cursor: pointer;
        border-top: 2px solid #c60000;
        overflow: hidden;

        .square-left {
          position: absolute;
          right: 180px;
          width: 50px;
          height: 70px;
          background-color: #fff;
          transform: skewX(15deg);
          border-right: 2px solid #c60000;
          border-top-right-radius: 10px;
        }

        .square-right {
          position: absolute;
          left: 180px;
          width: 50px;
          height: 70px;
          background-color: #fff;
          transform: skewX(-15deg);
          border-left: 2px solid #c60000;
          border-top-left-radius: 10px;
        }
      }

      .activeTab {
        color: #c60000;
        background-color: #fff;
      }
    }

    .form-block {
      width: 100%;
      padding: 42px 22px 22px 22px;
      border-radius: 10px;
      // padding: 22px 22px 22px 22px;
      border: 2px solid #c60000;
      // border-top: none;
      box-sizing: border-box;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;

      .form-item {
        width: 100%;

        input {
          width: 250px;
          border: none;
          outline: none;
          font-size: 12px;
          color: #333;

          &::-webkit-input-placeholder {
            font-size: 12px;
            color: #c2c2c2;
          }

          &:-moz-placeholder {
            font-size: 12px;
            color: #c2c2c2;
          }

          &::-moz-placeholder {
            font-size: 12px;
            color: #c2c2c2;
          }

          &:-ms-input-placeholder {
            font-size: 12px;
            color: #c2c2c2;
          }
        }

        .input-block {
          position: relative;
          display: flex;
          align-items: center;
          width: 100%;
          height: 50px;
          padding: 8px 14px 0px 14px;
          box-sizing: border-box;
          border-bottom: 2px solid #f4ccd3;
          margin-bottom: 20px;

          img {
            width: 20px;
            height: 20px;
            margin-right: 20px;
          }

          .icon {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translate(0, -50%);
            color: #c60000;
            font-size: 18px;
            cursor: pointer;
            user-select: none;
          }
        }

        .check-box {
          display: flex;
          align-items: center;
          width: 100%;
          height: 50px;
          padding: 0px 22px 0px 15px;
          box-sizing: border-box;
          color: #c2c2c2;
          font-size: 14px;

          .icon-square {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 14px;
            height: 14px;
            border: 1px solid #c60000;
            margin-right: 22px;
            user-select: none;
            cursor: pointer;

            .icon-mark {
              color: #c90e2f;
            }
          }

          .text {
            font-size: 12px;
            color: #c2c2c2;
          }
        }

        .input-code {
          position: relative;
          display: flex;
          align-items: center;
          width: 100%;

          margin-bottom: 20px;

          .l {
            width: 75%;
            height: 50px;
            padding: 8px 14px 10px 14px;
            box-sizing: border-box;
            border-bottom: 2px solid #f4ccd3;
            display: flex;

            img {
              width: 20px;
              height: 20px;
              margin-right: 20px;
            }
          }

          .r {
            position: relative;
            flex-grow: 1;
            height: 50px;
            padding: 0px 0px 10px 0px;
            box-sizing: border-box;
            border-bottom: 2px solid #f4ccd3;
            margin-left: 10px;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 70px;

        .btn-login {
          width: 210px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          font-weight: bold;
          color: #fff;
          background-color: rgba(216, 30, 6);
          font-size: 20px;
          border-radius: 20px;
          user-select: none;
          cursor: pointer;

          &:hover {
            // background-color: rgba(216, 30, 6, 0.7);
          }
        }
      }
    }
  }

  .welcome {
    position: absolute;
    top: 118px;
    left: 200px;
    font-size: 34px;
    font-weight: 700;
    color: #c60000;
    padding-bottom: 35px;
  }

  .left {
    border-left: 2px solid #c60000;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  .right {
    border-right: 2px solid #c60000;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
</style>
